<template>
    <el-row>
      <div style="margin-left:10px; margin-top: 25px;">
      <el-col span="12">
   <el-card>
       <div slot="header" class="clearfix">
        <span>健康打卡申报</span>
       </div>
      
       <div class="www">
         <el-row >
         <span>姓名:</span>
         <el-input  v-model="name"  style="width:250px"/>
         <span>性别:</span>
         <el-input  v-model="sex" style="width:250px"/>
      </el-row>
       </div>
       <div class="www" style="margin-top:15px">
         <el-row>
            <span>手机号码:</span>
         <el-input  v-model="phone" style="width:260px"/>
         <span>
            体温:
         </span>
         <el-input  v-model="temperature" style="width:200px"/>
      
        
         </el-row>
       </div>
       <div class="www" style="margin-top:15px">
         <el-row>
          <span>专业:</span>
          <el-input  v-model="college"  style="width:140px"/>
          <span>班级:</span>
          <el-input  v-model="className" style="width:160px"/>
          <span>宿舍:</span>
          <el-input  v-model="dormitory" style="width:165px"/>
         </el-row>
       </div>
       <div class="www" style="margin-top:15px">
        <el-row>
         <span>当前位置:</span>
         <el-input  v-model="dakalocal"  style="width:506px"/>
        </el-row>
      </div>
      <div class="www" style="margin-top:15px">
         <el-row>
            <span>是否到达高风险地区:</span>
            <el-input  v-model="situation" style="width:425px"/>
         </el-row>
      </div>
      <div class="www" style="margin-top:15px">
         <el-row>
            
            <span>健康状况:</span>
            <el-input  v-model="healthy" style="width:507px"/>
         </el-row>
      </div>
      <div class="www" style="margin-top:15px">
         <el-button type="primary" @click="onSubmit" style="width:280px">立即创建</el-button>
            <el-button @click="quxiao" style="width:286px">取消</el-button>
      </div>
   
   </el-card>
</el-col>
<el-col span="12">
<el-card style="height:580px" >
   <div slot="header" class="clearfix">
        <span>打卡记录</span>
   </div>
   <div>
        <el-table :data="fillterAndPageData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="90"></el-table-column>
            <el-table-column prop="sex" label="性别" width="80"></el-table-column>
            
            <el-table-column prop="temperature" label="体温" width="90"></el-table-column>
         
            
            <el-table-column prop="dakalocal" label="打卡地点" width="90"></el-table-column>
            
            <el-table-column prop="dakatime" label="打卡时间" width="140"></el-table-column>
            <el-table-column prop="healthy" label="健康状况" width="90"
            >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.healthy === '健康' ?  'success':'danger' "
          disable-transitions>{{scope.row.healthy}}</el-tag>
         
      </template>
        </el-table-column>
        </el-table>
        <el-pagination
    
    @current-change="handleCurrentChange"
    :current-page.sync="pagenum"
    :page-size="10"
    layout="total, prev, pager, next"
    :total="this.total">
  </el-pagination>
        
   
  
    </div>
</el-card>
</el-col>
</div>
</el-row>
   </template>
   
   <script>
    export default{
         data(){
            return{
               fillterAndPageData:'',
               name:'',
               sex:'',
               phone:'',
               dormitory:'',
               className:'',
               college:'',
               dakalocal:'',
               temperature:'',
               situation:'',
               healthy:'',
               data:'',
               pagenum:'',
            total:'',
             
            }
         },
       created(){
         this.query()
       },
         methods: {
            onSubmit(){
              
               fetch("http://1.15.134.100:9999/daka2",{
                  method:"POST",
                  headers: {
                       'Content-type': 'application/json',
                       
                       'token': localStorage.getItem('token'),
                   
                   },
                   body: JSON.stringify({
                     name:this.name,
                     sex:this.sex,
                     phone:this.phone,
                     dormitory:this.dormitory,
                     className:this.className,
                     college:this.college,
                     dakalocal:this.dakalocal,
                     temperature:this.temperature,
                     situation:this.situation,
                     healthy:this.healthy,
                    
                     
   
                     
                   })
               }).then(response => response.json())
                   .then(data => {
                       console.log(data);
                       alert("添加成功");
                  
                    this.$router.go(0);
   
                   });
   
               
            },
            quxiao(){
               this.$router.go(0);
            },
            query(){
               let xx=sessionStorage.getItem("user");
            fetch("http://1.15.134.100:9999/daka/one?username="+xx,{
                method:"GET",
                headers:{
                    'token': localStorage.getItem('token'),
                },
            }
            )
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
                this.total=res.data.total

            })
        },
        handleCurrentChange(pagenum) {
        
        this.pagenum=pagenum;
        this.query();
      },
   
  },

         
      }
   
     
   </script>
   <style>
       .clearfix{
           display:flex;
       }
     
     .btn{
      
       
     }
     .www{
      display: flex;
     }
     .el-pagination{
    margin-left: 400px;
}


   </style>